<template>
  <div class="form-data-list">
   <ul>
     <li v-for="(item, index) in getItems" :key="index">
       <el-button @click.stop="onGetExportData(item)">{{item.start + '-' + item.end + '条数据'}}</el-button>
     </li>
   </ul>
    <iframe src="" ref="iframe"></iframe>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  

  export default {
    setup () {
      return {
        limit: 50000
      }
    },
    computed: {
      ...mapState({
        exportData: state => state.user.exportData,
      }),
      getItems(){
        let items = [];
        let num = Math.ceil(this.exportData.total/this.limit)
        _.times(num, (index) => {
          let obj = {}
          obj.start = index * this.limit
          obj.end = (index+1) * this.limit
          items.push(obj)
        })
        return items
      }
    },
    methods: {
      ...mapActions({
        getExportData: 'user/getExportData'
      }),
      onGetExportData(item){
        this.$refs.iframe.src = this.env.apiUrl + '/stat/expdata?site_id=' + this.exportData.site_id + '&table=com_form&start=' + item.start + '&limit=' + this.limit + ''
        ////apib.hd.xxx.com/v1/stat/expdata?site_id=62&table=com_form&start=1&limit=50000
      },
    }
  }
</script>

<style lang="scss" scoped>
  .form-data-list{
    margin: 30px 0;
    box-shadow: 0 2px 4px rgba(18, 123, 255, 0.1);

    li{
      display: inline-block;
      margin: 10px;
    }
    .form-data-textarea{
      width: 96%;
      margin: 20px;
    }
    .form-data-textarea textarea{
      min-height: 500px;
    }
    iframe{
      display: none;
    }
  }
</style>
